<template>
  <van-grid
    :column-num="3"
    :gutter="20"
    :border="false"
    :clickable="true"
    style="margin-bottom: 186px"
  >
    <van-grid-item
      v-for="item in ClassWhole"
      :key="item.id"
      :icon="item.icon"
      :text="item.title"
    />
  </van-grid>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getClass } from "../api/api";

const ClassWhole = ref([]);

const getClassWhole = async () => {
  const res = await getClass();
  console.log(5, res);
  if (res.status === 200) {
    ClassWhole.value = res.data.info;
  }
};

onMounted(() => {
  getClassWhole();
});
</script>

<style scoped lang="scss">
:deep(.van-icon__image) {
  height: 80px;
}
</style>
